<template>
  <div class="home-container">
    <el-row
      :gutter="20"
      style="margin-bottom: 24px;"
    >
      <el-col :span="6">
        <el-card>
          <div class="stat-title">
            总用户数
          </div>
          <div class="stat-value">
            {{ stats.users }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-title">
            总商品数
          </div>
          <div class="stat-value">
            {{ stats.products }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-title">
            总订单数
          </div>
          <div class="stat-value">
            {{ stats.orders }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-title">
            总交易额
          </div>
          <div class="stat-value">
            ￥{{ stats.amount }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row
      :gutter="20"
      style="margin-bottom: 24px;"
    >
      <el-col :span="24">
        <div class="carousel-wrapper">
          <el-carousel
            :height="carouselHeight"
            :interval="3000"
            arrow="always"
          >
            <el-carousel-item
              v-for="(img, idx) in images"
              :key="idx"
            >
              <img
                :src="img"
                class="carousel-img"
                @load="onImgLoad"
              >
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div style="margin-bottom: 12px; display: flex; align-items: center;">
            <el-radio-group
              v-model="chartType"
              size="small"
            >
              <el-radio-button label="商品数" />
              <el-radio-button label="用户数" />
              <el-radio-button label="交易额" />
            </el-radio-group>
            <el-radio-group
              v-model="seriesType"
              size="small"
              style="margin-left: 16px;"
            >
              <el-radio-button label="bar">
                柱状图
              </el-radio-button>
              <el-radio-button label="line">
                折线图
              </el-radio-button>
            </el-radio-group>
          </div>
          <div
            ref="chartRef"
            style="height:300px;width:100%"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
const chartRef = ref()
const chartType = ref('商品数')
const seriesType = ref('bar')
const stats = ref({ users: 1200, products: 350, orders: 800, amount: 56000 })
const images = [
  'https://preview.qiantucdn.com/auto_machine/20230825/e851e8e8-3451-448f-87b3-8c056eedffc4.png!qt1024_1',
  'https://preview.qiantucdn.com/auto_machine/20240512/876005d9-4b1d-4f17-ba3e-b009cb0f3bed.jpg!qt1024_1',
  'https://preview.qiantucdn.com/auto_machine/20201123/85b3eeaf-3b12-42a9-a480-4040f06852bb.jpg!qt1024_1'
]
const chartData: Record<string, number[]> = {
  '商品数': [5, 20, 36, 10, 15, 22],
  '用户数': [10, 12, 18, 25, 30, 40],
  '交易额': [1000, 2000, 1500, 3000, 4000, 3500]
}
let chart: echarts.ECharts
function renderChart() {
  if (!chartRef.value) return
  if (!chart) chart = echarts.init(chartRef.value)
  chart.setOption({
    title: { text: chartType.value },
    tooltip: {},
    xAxis: { data: ['一月', '二月', '三月', '四月', '五月', '六月'] },
    yAxis: {},
    series: [{ type: seriesType.value, data: chartData[chartType.value] }]
  })
}
onMounted(() => {
  renderChart()
})
watch([chartType, seriesType], renderChart)
const carouselHeight = ref('360px')
function onImgLoad(e: Event) {
  const img = e.target as HTMLImageElement
  // 保持最大高度360px，宽度自适应
  if (img.naturalHeight && img.naturalWidth) {
    const ratio = img.naturalWidth / img.naturalHeight
    if (ratio > 1.8) {
      carouselHeight.value = '260px'
    } else if (ratio < 1.2) {
      carouselHeight.value = '400px'
    } else {
      carouselHeight.value = '360px'
    }
  }
}
</script>

<style scoped>
.home-container { padding: 32px; }
.stat-title { color: #888; font-size: 14px; }
.stat-value { font-size: 28px; font-weight: bold; margin-top: 8px; }
.carousel-wrapper {
  width: 100%;
  margin: 0 auto;
}
.carousel-img {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  background: #f5f6fa;
  border-radius: 8px;
}
</style>
